<template>
    <f7-page class="page-contact-list" no-toolbar>
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center>通讯录</f7-nav-center>
            <f7-nav-right sliding>
                <f7-link @click="save">保存</f7-link>
            </f7-nav-right>
        </f7-navbar>
        <div class="main">
            <f7-searchbar cancel-link="取消" placeholder="搜索" :clear-button="true"></f7-searchbar>
            <f7-list media-list class="contact-list">
                <f7-list-group>
                    <f7-list-item title="通讯录" group-title></f7-list-item>
                    <f7-list-item title="王老四" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl" @click="select($event)"></f7-list-item>
                </f7-list-group>
            </f7-list>
        </div>

        <div class="alpha-list">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
                <li>E</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>I</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
                <li>M</li>
                <li>N</li>
                <li>O</li>
                <li>P</li>
                <li>Q</li>
                <li>R</li>
                <li>S</li>
                <li>T</li>
                <li>U</li>
                <li>V</li>
                <li>W</li>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
            </ul>
        </div>
    </f7-page>
</template>

<style lang="scss">
@import "../../assets/css/common.scss";

</style>
<script>
export default {
    data() {
        return {
            mediaTpl: '<i class="icon fa fa-circle-o"></i>\
                        <div class="avatar">\
                        <img src="static/img/test.e6f2beb.jpg">\
                       </div>'
        }
    },
    methods: {
        select(e) {
            this.$$(e.target).closest('li').find('.icon').toggleClass('fa-circle-o').toggleClass('fa-check-circle')
        },
        save() {
            this.$router.back()
        }
    }
};
</script>
